<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用jQuery完成表格隔行换色</title>
		<!--引入scc样式 -->
		<link href="../css/style.css" />
		<script src="../js1/jquery-1.11.0.min.js"></script>
		<script>
			<!--
			/*JQ中类似于setAttribute的方法
			   attr("属性名") ===> 获取对应的值
			   attr("属性名","值") ===> 设置属性对应的值
			   --- attribute 自定义属性,html不支持的属性(自己写的)

				prop("属性名") ===>  获取属性对应的值
				prop("属性名","值") ===> 设置属性对应的值
				--- property 固有属性,html本身支持的属性
					例如: href src checked
			   */
			-->

			$(function () {
				//1.修改奇数行和偶数行的颜色
				 $("tbody tr:odd").css("background-color","aqua");
				 $("tbody tr:even").css("background-color","red");
				// $("tbody tr:odd").addClass("odd");
				// $("tbody tr:even").addClass("even");

				//2.给tr添加事件
				$("tbody tr").mouseover(function () {
					//this 是JS对象
					//this.setAttribute("color",this.style.background);
					//Ⅰ.讲JS转换成JQ对象  Ⅱ.保留之前的颜色
					$(this).attr("color",$(this).css("background-color"));
					//Ⅲ.设置颜色变成为其他颜色
					$(this).css("background-color","green");
				});
				//当鼠标离开时，取出之前保留的颜色
				$("tbody tr").mouseout(function () {
					//之前的写法
					//var color = this.getAttribute("color");
					var color = $(this).attr("color");
					$(this).css("background-color", color);
				});
			});

		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr >
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr >
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr >
					<td>4</td>
					<td>赵六</td>
					<td>29</td>
				</tr>
				<tr >
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr >
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
